<template>
    <view class="">
        <view class=""
              style="background-color: #fff;">
            <view class=""
                  :style="{height:H+'px'}">

            </view>
            <view class="back ls-f-ac">
                <u-icon name="arrow-left"
                        @click="back"
                        color="#333"
                        size="45"></u-icon>
                <view class=""
                      style="width: 100rpx;"></view>
                <u-tabs :list="tabs"
                        name="name"
                        item-width="190"
                        paddingRight="50rpx"
                        :current="currentIndex"
                        @change="sel"
                        height="80"
                        font-size="32"
                        bar-width="64"
                        gutter="44"
                        bg-color=" #fff"
                        inactive-color="#666666"
                        active-color="#63B9F2"></u-tabs>
            </view>
        </view>

        <view class="tab ls-f-ac ls-f-ajsb">

            <view class="item ls-f-ajc"
                  v-for="(item,index) in navList"
                  :class="tabIndex==index?'sel':''"
                  @click="seltab(index)">{{item.text}}</view>

        </view>
        <scroll-view scroll-y="true"
                     style="height: calc( 100vh - 100rpx );">
            <view v-if="currentIndex==0">
                <view class="card"
                      v-for="(item,index) in list"
                      @click="goto(item)">
                    <image src="../../../static/images/common_pic_ytg@2x.png"
                           v-if="item.status==1"
                           mode=""
                           class="icon"></image>
                    <image src="../../../static/images/common_pic_wtg@2x.png"
                           v-if="item.status==-1"
                           mode=""
                           class="icon"></image>
                    <image src="../../../static/images/common_pic_spz@2x.png"
                           v-if="item.status==0"
                           mode=""
                           class="icon"></image>
                    <view class="title">{{item.title||"请假申请"}}</view>
                    <view class="time"
                          style="margin-top: 10rpx; margin-bottom: 32rpx;">{{item.addTime||""}}</view>
                    <view class="time  ls-f-ac"
                          style="margin-bottom: 20rpx;">
                        <text>请假时间：</text>
                        <text class="mark">{{item.leaveTime||""}}</text>
                    </view>
                    <view class="time mt ls-f-ac">
                        <text>请假原因：</text>
                        <text class="mark">{{item.remake||""}}</text>
                    </view>
                </view>
            </view>
            <view v-if="currentIndex==1">
                <view class="card"
                      v-for="(item,index) in courseList"
                      @click="goto(item)">
                    <image src="../../../static/images/common_pic_ytg@2x.png"
                           v-if="item.status==1"
                           mode=""
                           class="icon"></image>
                    <image src="../../../static/images/common_pic_wtg@2x.png"
                           v-if="item.status==-1"
                           mode=""
                           class="icon"></image>
                    <image src="../../../static/images/common_pic_spz@2x.png"
                           v-if="item.status==0"
                           mode=""
                           class="icon"></image>
                    <view class="title">{{item.title||""}}</view>
                    <view class="time"
                          style="margin-top: 10rpx; margin-bottom: 32rpx;">{{item.time||""}}</view>
                    <view class="time mt ls-f-ac">
                        <text>代课课程：</text>
                        <text class="mark">{{item.productName||""}}</text>
                    </view>
                    <view class="time mt ls-f-ac">
                        <text>代课时间：</text>
                        <text class="mark">{{item.leaveTime||""}}</text>
                    </view>
                    <view class="time mt ls-f-ac">
                        <text>代课老师：</text>
                        <text class="mark">{{item.takeUserName||""}}</text>
                    </view>
                    <view class="time mt ls-f-ac">
                        <text>联系方式：</text>
                        <text class="mark">{{item.takeTelNo||""}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class=""
              style="height: 150rpx;">

        </view>
        <image src="../../../static/images/gzjl_icon_add@2x.png"
               class="add"
               @click="add"
               mode=""></image>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabIndex: 0,
            type: 0,
            pageSize: 100,
            pageNum: 1,
            courseList: [
                {
                    title: "111",
                    course: '跆拳道',
                    time: '2020-11-11',
                    teacher: '2020-11-11',
                    phone: '我有点事，希望请假',
                    status: 2
                },
                {
                    title: "111",
                    course: '跆拳道',
                    time: '2020-11-11',
                    teacher: '2020-11-11',
                    phone: '我有点事，希望请假',
                    status: 2
                },
                {
                    title: "111",
                    course: '跆拳道',
                    time: '2020-11-11',
                    teacher: '2020-11-11',
                    phone: '我有点事，希望请假',
                    status: 2
                },
            ],
            list: [
                {
                    title: "请假",
                    time: '2020-11-11',
                    leave: '2020-11-11',
                    mark: '我有点事，希望请假',
                    status: 2
                },
                {
                    title: "请假",
                    time: '2020-11-11',
                    leave: '2020-11-11',
                    mark: '我有点事，希望请假',
                    status: 3
                },
                {
                    title: "请假",
                    time: '2020-11-11',
                    leave: '2020-11-11',
                    mark: '我有点事，希望请假',
                    status: 2
                }
            ],
            navList: [
                {
                    text: '审批中',
                    value: 0
                },
                {
                    text: '已通过',
                    value: 1
                },
                {
                    text: '未通过',
                    value: -1
                },

            ],
            currentIndex: 0,
            H: 20,
            tabs: [{
                name: '请假'
            },
            {
                name: '代课'
            },
            ],
        }
    },
    onLoad() {
        this.H = uni.getMenuButtonBoundingClientRect().top + 3
        console.log(this.H);

    },
    onShow() {
        this.getleaveList(this.navList[this.tabIndex].value);
        this.getTakeClassList(this.navList[this.tabIndex].value)
    },
    methods: {
        goto(e) {
            let aa = JSON.stringify(e);
            uni.navigateTo({
                url: "leaveDetail?item=" + aa + "&type=" + this.currentIndex
            })
        },
        add() {
            if (this.currentIndex == 0) {
                uni.navigateTo({
                    url: 'addLeave?type=1'
                })
            } else {
                uni.navigateTo({
                    url: 'addLeave?type=2'
                })
            }

            // uni.navigateTo({
            // 	url:'leaveDetail'
            // })

        },
        seltab(e) {
            this.tabIndex = e
            if (this.currentIndex == 0) {
                this.getleaveList(this.navList[e].value);
            } else {
                this.getTakeClassList(this.navList[this.tabIndex].value)
            }

        },
        back() {
            uni.navigateBack({

            })
        },
        sel(e) {
            this.currentIndex = e
            if (e == 1) {
                this.courseList = []
                this.getTakeClassList(this.navList[this.tabIndex].value)
            } else {
                this.list = []
                this.getleaveList(this.navList[this.tabIndex].value);
            }

        },
        getleaveList() {
            let data = {
                status: this.navList[this.tabIndex].value,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                // userId:163806387673800120,
                // schoolId:163806425940500120
            }
            this.$api.getLeaveList(data, res => {
                this.list = res.data.list

            })
        },
        getTakeClassList() {
            let data = {
                status: this.navList[this.tabIndex].value,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            this.$api.getTakeClassList(data, res => {
                this.courseList = res.data.list

            })
        }
    }
}
</script>

<style scoped lang="scss">
.mt {
    margin-bottom: 20rpx;
}
.add {
    width: 164rpx;
    height: 164rpx;
    position: fixed;
    right: 20rpx;
    bottom: 70rpx;
}
.card {
    width: 686rpx;
    padding: 32rpx;
    margin: 32rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 32rpx;
    position: relative;
    .icon {
        width: 136rpx;
        height: 136rpx;
        position: absolute;
        top: 6rpx;
        right: 6rpx;
    }
    .title {
        font-size: 36rpx;
        font-weight: bold;
    }
    .time {
        font-size: 28rpx;
        color: #999999;
    }
    .mark {
        font-size: 28rpx;
        color: #333;
    }
}
.tab {
    padding-top: 40rpx !important;
    background-color: #fff;
    width: 750rpx;
    padding: 12rpx 32rpx;
    .item {
        width: 218rpx;
        height: 64rpx;
        background: #f5f5f5;
        color: #333;
        font-size: 28rpx;
        border-radius: 16rpx;
    }
    .sel {
        color: #63b9f2 !important;
        border: 2px solid #63b9f2 !important;
    }
}
.u-scroll-box {
    margin-left: 100rpx !important;
}
.back {
    margin-left: 20rpx;
}
</style>
